https://vapi.ai/ logo
Join Discord
Powered by
Embedding Vapi Agent to website
# support
e
How do I embed Vapi agents to a website so the users can just click on an icon or image to start the conversation. I have created a landing page and would like to add an agent so the user can test it over for 2mins or so, to give them a taste of what the agent can do. Ideally just using HTML, CSS and Javascript, nothing too complicated. From there, they would need to signup to get full access under their individual account, which I would be able to bill them on a per usage basis (in minutes).
v
Hey there! 👋 I'm unable to provide specific code for implementing the signup and per-usage billing system you mentioned. However, I can definitely help with embedding a Vapi agent on your landing page using HTML, CSS, and JavaScript! Here's how to embed a Vapi agent on your website so users can click on an icon to start a conversation: ## Basic Implementation The simplest way to embed a Vapi agent is by using the Vapi Voice Widget. Add this code snippet to your HTML, ideally before the closing 
</body>
tag:
Copy code
html
<script>
  var vapiInstance = null;
  const assistant = "<assistant_id>"; // Substitute with your assistant ID
  const apiKey = "<your_public_api_key>"; // Substitute with your Public key from Vapi Dashboard
  const buttonConfig = {}; // Modify this as required

  (function (d, t) {
    var g = document.createElement(t),
      s = d.getElementsByTagName(t)[0];
    g.src =
      "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);

    g.onload = function () {
      vapiInstance = window.vapiSDK.run({
        apiKey: apiKey, // mandatory
        assistant: assistant, // mandatory
        config: buttonConfig, // optional
      });
    };
  })(document, "script");
</script>
Remember to replace 
<assistant_id>
with your actual assistant ID and 
<your_public_api_key>
with your public API key from the [Vapi Dashboard](https://docs.vapi.ai/examples/voice-widget). ## Placing the Widget in a Specific Location If you want to place the widget in a specific location on your page, you can append it to a custom element:
Copy code
html
<div id="Call"></div>

<script>
  // Same script as above
</script>
This will attach the Vapi widget to the div with ID "Call" instead of the default location ([source](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1336696033366773800)). ## Customizing the Appearance
You can customize the appearance of the Vapi button using CSS. For example, to ensure the button is clickable:
Copy code
css
<style>
.vapi-btn {
  z-index: 1000 !important;
}
</style>
You can also change the default green circle to a custom image by modifying the styling ([source](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1336007021308149861)). ## Triggering Conversations with Custom Icons To use your own icon or image to trigger the conversation, you can create a button with an onClick event handler:
Copy code
html
<button id="start-conversation" onClick="startConversation()">
  <img src="your-icon.png" alt="Start Conversation" />
</button>

<script>
  function startConversation() {
    // Function to start the conversation
    vapi.send({
      type: "add-message",
      message: {
        role: "system",
        content: "The user has clicked to start a conversation",
      },
    });
  }
</script>
The 
vapi.send
function is the primary way to interact with your assistant ([source](https://docs.vapi.ai/assistants/background-messages)). Is there anything specific about the embedding process you'd like me to explain further? Sources: - [Vapi Voice Widget Documentation](https://docs.vapi.ai/examples/voice-widget) - [Discord Thread on Custom Element Embedding](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1336696033366773800) - [Discord Thread on Customizing Appearance](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1336007021308149861) - [Background Messages Documentation](https://docs.vapi.ai/assistants/background-messages)
v
Message marked as helpful by @Elastic! 🎉
k
checking if this is resolved/solved for you?
e
Will be having a meeting later today to test this out, at least the page embed portion. I will follow up. The call for the Dementia assistants are still cutting off way too early, so waiting to see how to resolve that. Thanks!
Embedding the Vapi Agent to our website is not working!.. Icon shows, but nothing happens when clicked. So not resolved.
k
Hey, I need to check the web browser console logs to see what's going wrong for you. Without the console logs, we can't get to know what's been wrong for you because it contains the error message, the error logs, and the error stack trace.
e
I've shared the URL with you personally yesterday so you could do just that to try and help trouble shoot. It's there when you get a chance to have a look.
k
Elastic, I have looked into your shared website, and your button is not working because you haven't added any JavaScript code or logic to trigger the web call when your primary button or CTA is clicked. You have to work on your JavaScript logic to make things work for you. To verify this, you can go into tablet mode, and the voice AI button will appear in the default button style. Clicking on it will start the AI call or the web call.
e
What browser are you using?
I'm trying on 3 different computers...and it's not working for me.
var vapiInstance = null; const assistant = "1234567890"; // Substitute with your assistant ID const apiKey = "1234567890"; // Substitute with your Public key from Vapi Dashboard. const buttonConfig = {}; // Modify this as required (function (d, t) { var g = document.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { vapiInstance = window.vapiSDK.run({ apiKey: apiKey, // mandatory assistant: assistant, // mandatory config: buttonConfig, // optional }); }; })(document, "script"); function startConversation() { // Function to start the conversation vapiInstance.send({ type: "add-message", message: { role: "system", content: "The user has clicked to start a conversation", }, }); }
k
Hey Elastic, I know it's been open for you all from a very long time. Let's get on DM and schedule a call to resolve it.
For others who might see this thread in future, the issue is on his side, and I'll be getting on a call with him to fix his JavaScript logic.
11 Views
PreviousNext
Powered by